<template>
  <div id="meal-popup">
    <van-popup v-model="meal_show" round position="bottom" :style="{ height: '50%' }" @click-overlay="cancal">
      <div class="meal-pane">
        <div class="top-name">
          <span class="cancal" @click="cancal">取消</span>
          <span class="middle">选择套餐</span>
          <span class="sure" @click="surePackage">确认</span>
        </div>
        <van-radio-group v-model="package_value">
          <div class="meal-box top-cost" v-for="(item, index) in package_list" :key="index">
            <div class="top-cost-title">
              <span>{{ item.name }}</span>
              <van-radio :name="item.value"></van-radio>
            </div>
            <div class="top-cost-tip">{{ item.desc }}</div>
          </div>
        </van-radio-group>
        <!-- <div class="change-meal-box" v-if="type">
          <div class="change-meal" >确定更换</div>
        </div> -->
      </div>
    </van-popup>
  </div>
</template>
<script>
import meal_popup_controller from "./meal_popup_controller";

export default meal_popup_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#meal-popup {
  .meal-pane {
    padding: 0.8rem 0;

    .top-name {
      padding: 0 0.8rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.85rem;

      .cancal {
        font-size: 0.7rem;
        font-weight: 400;
        color: #999;
      }

      .middle {
        font-size: 0.9rem;
        font-weight: 400;
        color: #333;
      }

      .sure {
        font-size: 0.85rem;
        font-weight: 400;
        color: #333;
      }
    }
  }

  .top-cost {
    margin-top: 1rem;

    .top-cost-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.85rem;
      font-weight: 500;
      color: #333;
    }

    .top-cost-tip {
      font-size: 0.75rem;
      font-weight: 400;
      color: #c2c2c2;
      margin-top: 0.3rem;
      text-align: left;
    }
  }

  .meal-box {
    padding: 0 0.8rem 0.75rem 0.8rem;
    border-bottom: 0.025rem solid #ececec;
    margin-top: 0.75rem;
  }

  .change-meal-box {
    padding: 0 0.6rem;

    .change-meal {
      color: white;
      background: #4978f8;
      border-radius: 1.025rem 1.025rem 1.025rem 1.025rem;
      padding: 0.65rem 0;
      margin: 1.2rem 0;
      font-size: 0.75rem;
      font-weight: 400;
    }
  }
}
</style>
